<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <style type="text/css">
        td{
            text-align: center;
        }

        .sub{
            font-weight: bold;
        }

        table,tr,td{
            border: 2px solid gray;
            border-collapse: collapse;
            width: 500px;
            height: 30px;
        }
    </style>
</head>
<body>
    

    <div id="app">
        <p><input type="button" @click="addgoods" value="添加"></p>

        <table>
            <tr class="sub">
                <td>id</td>
                <td>商品名称</td>
                <td>商品价格</td>
                <td>商品数量</td>
                <td>操作</td>
            </tr>

            <tr v-for="(good,index) in goods" v-bind:key="index">
                <td>{{good.id}}</td>
                <td>{{good.name}}</td>
                <td>{{good.price}}</td>
                <td><input type="button" @click="sub(index)" value="-"> {{good.count}} <input type="button" value="+" @click="add(index)"></td>
                <td><input type='button' @click='delgoods(index)' value='移除'></td>
            </tr>

            <tr v-show="ok">
                <td><input type="text" v-model="gid" style="width: 50px;" v-bind:key="gid"></td>
                <td><input type="text" v-model="gname" style="width: 50px;"></td>
                <td><input type="text" v-model="gprice" style="width: 50px;"></td>
                <td><input type="text" v-model="gcount" style="width: 50px;"></td>
                <td><input type="button" @click="submit" value="确认"></td>
            </tr>
        </table>

        <h3>购物车所有商品的总价格为: {{total}} </h3>

    </div>


    <script type="text/javascript">
        var vm =new Vue({
            el: '#app',
            data: {
                ok:false,

                goods:[
                    {id:1,name:"充电宝",price:99.111,count:1},
                    {id:2,name:"小风扇",price:88.222,count:1},
                    {id:3,name:"小音箱",price:125.533,count:1},
                    {id:4,name:"蓝牙耳机",price:315.344,count:1},
                ],

                gid:'',
                gname:'',
                gprice:'',
                gcount:'',
                
            },
            methods:{
                sub(index){
                    if(this.goods[index].count==0){
                        alert("商品数量不能为负数")
                    }else{
                        this.goods[index].count--;
                    }
                },
                add(index){ 
                    this.goods[index].count++;
                },

                delgoods(index){
                    this.goods.splice(index,1);
                },

                addgoods(){
                    this.ok=!this.ok;
                },
                submit(){
                    this.goods.push({id:this.gid,name:this.gname,price:this.gprice,count:this.gcount});
                    this.ok=!this.ok;
                    gid='';
                    gname='';
                    gprice='';
                    gcount='';
                }
            },
            computed:{
                total(){
                    totalPrice = 0;
                    for (i = 0; i < this.goods.length; i++) {
                        totalPrice += this.goods[i].count * this.goods[i].price;
                    }
                    return totalPrice.toFixed(2);
                }
            }
        })

    </script>
</body>
</html>